var my_form = new Array();

my_form['name'] = ['Ф.И.О.', false, 'Вводите чё хотите.'];
my_form['email'] = ['E-mail', /^([a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)$/, 'У вас кривой e-mail'];
my_form['tel'] = ['Телефон', /^(\+?[0-9]+\s*(\([0-9]+\))?\s?[0-9\-\s]+\+?[0-9]*)$/, 'Что это за телефон?'];

for (var key in my_form)
{   my_form[key]['hint'] = my_form[key][0];
    my_form[key]['patt'] = my_form[key][1];
    my_form[key]['message'] = my_form[key][2];
    my_form[key]['value_ok'] = true;
}

text_color = '#666'; // тёмный шрифт текста
hint_color = '#BBB'; // светлый шрифт хинтов

// цвета правильных и неправильных полей
back_color_ok = '#DFD';
back_color_err = '#FDD';
back_color_norm = '#FFF';

// раскрашивает поля по результатам проверки содержимого
function color_input (element) 
{   element = check_elem(element);
    patt = my_form[element.id]['patt'];
    if (patt)
    {   if (patt.test(element.value))
        {   // (+) введенное подходит (+)
            element.style.backgroundColor = back_color_ok;
            my_form[element.id]['value_ok'] = true;
        }
        else
        {   // (-) введенное НЕ подходит (-)
            element.style.backgroundColor = back_color_err;
            my_form[element.id]['value_ok'] = false;
        }
    }
    return true;
}

function err_message (element)
{
    alert(my_form[element.id]['message']);
    return true;
}

/* *******************************************************************************
 * Дальше соваться не рекомендуется, но на свой страх и риск - сколько угодно :)
 ******************************************************************************* */
 
// обнуляет значения перед сабмитом, чтобы хинты не ушли в форму как информация (submit, onClick)
function confirm_all ()
{   for (var key in my_form)
        if (document.getElementById(key).value == my_form[key]['hint'])
            document.getElementById(key).value = '';
    return true;
}

// запускает обработчики всех полей при загрузке (инициализация, onLoad)
function check_all ()
{   for (var key in my_form)
    {   check_input(document.getElementById(key));
        addEvent(document.getElementById(key), 'focus');
        addEvent(document.getElementById(key), 'keyup');
        addEvent(document.getElementById(key), 'blur');
    }
    addEvent(document.getElementById('submit_button'), 'click');
    return true;
}

// отрабатывает окончание ввода (onBlur)
function check_input (element)
{   element = check_elem(element);
    if ((element.value == my_form[element.id]['hint']) || (element.value == ''))
    {   element.style.color = hint_color;
        element.value = my_form[element.id]['hint'];
        element.style.backgroundColor = back_color_norm;
    }
    else
    {   element.style.color = text_color;
        if (!my_form[element.id]['value_ok'])
            err_message(element);
    }
    return true;
}

// отрабатывает начало редактирования значения (onFocus)
function click_input (element)
{   element = check_elem(element);
    if (element.value == my_form[element.id]['hint'])
    {   element.value = '';
        element.style.color = text_color;
    }
    return true;
}

// устанавливает this, чтобы можно было обращаться и с прослушивателя, и напрямую
// special thanks to http://www.howtocreate.co.uk/tutorials/javascript/domevents
function check_elem (element) 
{   if (element.nodeName != 'INPUT')
    {   var theTarget = element.target ? element.target : element.srcElement;
        if (theTarget && (theTarget.nodeType == 3 || theTarget.nodeType == 4))
        theTarget = theTarget.parentNode;
        element = theTarget;
    }
    return element;
}

// добавляет прослушиватель события
// special thanks to http://www.howtocreate.co.uk/tutorials/javascript/domevents
function addEvent (element, event)
{   if (event == 'focus') // click_input
    {   if (element.addEventListener) element.addEventListener(event, click_input, false);
        else if (element.attachEvent) element.attachEvent('on'+event, click_input);
    }
    if (event == 'keyup') // color_input
    {   if (element.addEventListener) element.addEventListener(event, color_input, false);
        else if (element.attachEvent) element.attachEvent('on'+event, color_input);
    }
    if (event == 'blur') // check_input
    {   if (element.addEventListener) element.addEventListener(event, check_input, false);
        else if (element.attachEvent) element.attachEvent('on'+event, check_input);
    }
    if (event == 'click') // confirm_all
    {   if (element.addEventListener) element.addEventListener(event, confirm_all, false);
        else if (element.attachEvent) element.attachEvent('on'+event, confirm_all);
    }
    return true;
}

window.onload = check_all;